<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-05-26 10:07:48
 * @LastEditors: 卓晓松 729519678@qq.com
 * @LastEditTime: 2022-07-28 15:55:52
 * @FilePath: \ericzhang\Rashipier_Monitor\myapp\src\components\rsione_info.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <h1>树莓派 1#</h1>
    <div class="info">
      <!-- 树莓派logo -->
      <span class="iconfont icon-shumeipai" @click="AOneshowframe()"></span>
      <!-- 树莓派信息：1.IP 2.位置 3.状态 -->
      <div class="rsi_info">
        <div class="IP">
          <span style="color: #b0c4de">IP:</span>
          <!-- 进行IP地址的动态输入 -->
          <span id="ID">10.12.140.8</span>
        </div>
        <div class="Location">
          <span style="color: #b0c4de">位置:</span>
          <span id="location">A栋</span>
        </div>
        <div class="status">
          <span style="color: #b0c4de">状态:</span>
          <span id="zhuangtai">良好</span>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { getCurrentInstance, ref, onMounted } from "vue";

// 点击logo图标，进行详细信息的获取
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const bus = proxy.$bus;

    // 设定全局变量
    const isshow = ref(true);

    function AOneshowframe() {
      /*
      进行外加逻辑设定
      1.设定公共变量
      */
      if (isshow.value == true) {
        bus.emit("AOneshow", "false");
        isshow.value = false;
      }
    }

    // 钩子函数，在执行“关闭窗口”时，进行公共变量重置
    onMounted(() => {
      bus.on("Onehide", () => {
        isshow.value = true;
      });
    });

    return {
      AOneshowframe,
      isshow,
    };
  },
};
</script>

<style lang="less" scoped>
// 引入字体文件
@import "~@/assets/icon/font/iconfont.css";

// 样式设计
h1 {
  color: rgb(65, 105, 225);
  font-size: 10px;
}
.info {
  display: flex;
  margin-top: 10px;
  span {
    margin-top: 0.1875rem;
    margin-left: 0px;
    font-size: 10px;

    // 点击情况下，出现“小手”式样
    cursor: pointer;
  }

  span.icon-shumeipai {
    color: green;
    font-size: 60px;
  }

  .rsi_info {
    display: flex;
    flex-direction: column;
  }

  .iconfont.icon-shumeipai:hover{
    color: skyblue;
  }
}

.IP {
  flex: 1;
  span {
    line-height: 25px;
  }
}

.Location {
  flex: 1;
  span {
    line-height: 25px;
  }
}

.status {
  flex: 1;
  span {
    line-height: 25px;
  }
}
</style>